<template>
	<view class="bigBox">
		<!-- 提示窗示例 -->
		<uni-popup :mask-click="true" ref="alertDialog" type="dialog">
			<view class="tipBox">
				<p class="H1">个人提现</p>
				<p class="p">个人提现时需缴税，对劳务报酬所得，其个人所得税应纳税额的计算公式为:</p>
				<p class="p">1.每次收入不足4000元的:</p>
				<p class="p">应纳税额=应纳税所得额x适用税率或=(每次收入额-800)x20%;</p>
				<p class="p">2.每次收入在4000元以上的:</p>
				<p class="p">应纳税额=应纳税所得额x适用税率或=每次收入额x(1-20%)x20%;</p>
				<p class="p">3.每次收入的应纳税所得额超过20000元的</p>
				<p class="p">应纳税额=应纳税所得额x适用税率-速算扣除数<br>或=每次收入额x(1-20%)x适用税率-速算扣除数:</p>
				<p class="p">4.退税方式:次年可以在个人所得税app申请退税，年收入不满六万，全额退税;</p>
				<p class="p" style="color: rgba(212, 48, 48, 1);">5.个人多账号同一身份证提现时，按月合并扣税。一旦提现，身份证号和姓名信息无法更改;</p>
				<p class="p" style="color: rgba(212, 48, 48, 1);">6.提现时请填写本人身份证信息，且与银行卡身份信息一致。请勿填写他人银行卡收款，否则税务风险自行承担。
				</p>
				<uni-table border stripe emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th align="center" width="50">级数</uni-th>
						<uni-th align="center" width="100">每次应缴纳所得税额</uni-th>
						<uni-th align="center" width="50">税率(%)</uni-th>
						<uni-th align="center" width="50">速算扣除(元)</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td align="center">1</uni-td>
						<uni-td>不超过20000元的部分</uni-td>
						<uni-td align="center">20</uni-td>
						<uni-td align="center">0</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">2</uni-td>
						<uni-td>超过20000~50000元的部分</uni-td>
						<uni-td align="center">30</uni-td>
						<uni-td align="center">2000</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">3</uni-td>
						<uni-td>超过50000元的部分</uni-td>
						<uni-td align="center">40</uni-td>
						<uni-td align="center">7000</uni-td>
					</uni-tr>

				</uni-table>

				<p class="H1">企业提现</p>
				<p class="p">企业需提现后自行申报缴税，业务合作及发票寄回详情信息请等待工作人员与您联系。</p>
				<p class="p">
					提现企业应根据提现金额向甲方开具内容为【信息服务费】的6%的增值税专用发票。如果提现方未按上述说明开具6%的增值税专用发票的，皮皮推文有权在应结算金额中扣除相应税率的进项税金后予以结算。</p>
				<p class="p">关于税率：</p>
				<p class="p">根据提现方开出的发票类型，皮皮推文扣除的税率为：提现方提供增值税普通发票，税率为6.72%；
					提现方提供1%增值税专用发票，税率为5.6%；提现方提供3%增值税专用发票，税率为3.36%；提现方提供6%增值税专用发票，税率为0%。</p>
			</view>
		</uni-popup>
		<view class="topBox" id="topBox">
			<p style="font-size: 12px;">提现金额</p>
			<uni-section title="单选" type="line" style="margin: 10px 0 10px 0;display: block;">
				<view class="uni-px-5 uni-pb-5" style="padding: 0;margin: 0;">
					<uni-data-checkbox v-model="cashData.cashUser" :localdata="cashUserList"></uni-data-checkbox>
				</view>
			</uni-section>
			<p>{{"￥"+ (cashMoney/100).toFixed(2)+"-税："+tax((cashMoney/100).toFixed(2))}}</p>
			<view class="tipP">
				<p>1.仅支持5元以上提现</p>
				<p @click="dialogToggle(info)" style="position: relative;">2.提现需缴纳税费 <image
						style="width: 14px;height: 14px;position: absolute;top: 50%;transform: translateY(-50%);margin-left: 4px;"
						src="../../../static/me/信息@2x.png"></image>
				</p>
				<p>3.提现到账时间七个工作日内</p>
			</view>
			<p>*请选择提现账单</p>
			<view class="orderTitle">
				<text class="order1">选择</text>
				<span class="orderLine1"></span>
				<text class="order2" style="vertical-align: unset;">金额</text>
				<span class="orderLine2"></span>
				<text class="order3" style="vertical-align: unset;">账单周期</text>
			</view>
			<scroll-view :show-scrollbar="false" class="scroll-Y" scroll-y="true">
				<view class="" v-for="(item,index) in billList" :key="index">
					<checkbox-group @change="changeCheck(item.id)" style="display: inline-block;">
						<label>
							<checkbox :value="item.id" :checked="cashData.checkBill.indexOf(item.id)!=-1" />
						</label>
					</checkbox-group>
					<text class="order2">{{(item.settlementMoney/100).toFixed(2)}}</text>
					<text class="order3">{{item.startTime+"--"+item.endTime}}</text>
					<view class="line" v-if="index!=billList.length-1"></view>
				</view>
			</scroll-view>

		</view>
		<view class="dataBox">
			<image class="hangIcon" src="../../../static/components/银行卡@2x.png"></image>
			<text style="font-size: 12px;margin-left: 4px;">到账银行卡信息</text><text style="font-size: 10px;">（必填）</text>
			<view class="line"></view>
			<p>*{{cashData.cashUser==1?"请输入姓名":"请输入企业名"}}</p>
			<input class="dataInput" type="text" v-model="cashData.name" />
			<p v-show="cashData.cashUser==1">*请输入身份证号</p>
			<input v-show="cashData.cashUser==1" class="dataInput" type="text" v-model="cashData.idNumber" />
			<p>*请输入银行名称</p>
			<input class="dataInput" type="text" v-model="cashData.bankName" />
			<p>*请输入开户网点</p>
			<input class="dataInput" type="text" v-model="cashData.bankAddres" />
			<p>*请输入银行卡号</p>
			<input class="dataInput" type="text" v-model="cashData.bankNumber" />
			<p>*请输入手机号</p>
			<input class="dataInput" type="text" v-model="cashData.phone" />
		</view>
		<button class="submitBtn" @click="submitCash">提交</button>


	</view>
</template>

<script>
	import api from '../../../api/api.js'
	import {
		parseUserData
	} from '../../../hook/auth.js'
	export default {
		data() {
			return {
				cashData: {
					checkBill: [],
					cashUser: 1,
					name: "",
					idNumber: "",
					bankAddres: "",
					bankNumber: "",
					phone: "",
				},
				cashUserList: [{
					text: '个人',
					value: 1
				}, {
					text: '企业',
					value: 2
				}],

				cashMoney: 0, //提现金额
				msgType: "success",
				billList: [],
			}
		},

		methods: {
			tax(num){
				if(num<=20000){
					return (num*0.2).toFixed(2)
				}else if(num<50000){
					return (num*0.3).toFixed(2)-2000
				}else{
					return (num*0.4).toFixed(2)-2000
				}
			},
			
			//改变提款周期，重新计算价格
			changeCheck(data) {
				const self = this
				if (self.cashData.checkBill.indexOf(data) == -1) {
					self.cashData.checkBill.push(data)
				} else {
					self.cashData.checkBill.splice(self.cashData.checkBill.indexOf(data), 1)
				}
				self.cashMoney = 0
				self.cashData.checkBill.forEach(val => {
					self.cashMoney += (self.billList.find((billItem) => billItem.id == val).settlementMoney)
				})
			},
			//获取账单数据
			getMore() {
				const self = this
				if (!parseUserData().openid) {
					uni.showToast({
						title: '请重新登录',
						duration: 2000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
				self.billList = []
				api.getBill({
					weChatId: parseUserData().openid
				}).then(res => {
					if (res.code == 200) {
						if (res.rows.length > 0) {
							self.billList = res.rows
						} else {
							uni.showToast({
								title: '账单未出，请耐心等待',
								icon: "none"
							})
						}
					}
				})
			},

			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			submitCash() {
				const self = this
				if (!parseUserData().openid) {
					uni.showToast({
						title: '请重新登录',
						duration: 2000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
				if (this.testData()) {
					//数据校验通过，提交提现信息
					api.addCash({
						ids: self.cashData.checkBill,
						cashInfo: self.cashData,
						settlement_money: self.cashMoney,
						weChatId: parseUserData().openid
					}).then(res => {
						console.log('cashRes', res)
						if (res.code == 200) {
							uni.showToast({
								title: "申请成功",
								icon: "success"
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
				}

			},
			testData() {
				if (this.billList.length == 0) {
					uni.showToast({
						title: "账单为空",
						icon: "error"
					})
					return
				}
				if (this.cashMoney == 0) {
					uni.showToast({
						title: "未选择账单",
						icon: "error"
					})
					return
				}
				if (!this.cashData.name) {
					uni.showToast({
						title: "请输入姓名",
						icon: "error"
					})
					return
				}
				console.log(1111111, this.cashData.cashUser)
				if (this.cashData.cashUser == 1 && (!this.cashData.idNumber || this.cashData.idNumber.length != 18)) {
					uni.showToast({
						title: "身份证号有误",
						icon: "error"
					})
					return
				}
				if (!this.cashData.bankName) {
					uni.showToast({
						title: "银行名称有误",
						icon: "error"
					})
					return
				}
				if (!this.cashData.bankAddres || this.cashData.bankAddres.length < 3) {
					uni.showToast({
						title: "开户网点有误",
						icon: "error"
					})
					return
				}
				if (!this.cashData.bankNumber || this.cashData.bankNumber.length < 11 || !/^\d+$/.test(this.cashData
						.bankNumber)) {
					uni.showToast({
						title: "银行卡号有误",
						icon: "error"
					})
					return
				}
				if (!this.cashData.phone || this.cashData.phone.length != 11 || !/^\d+$/.test(this.cashData.phone)) {
					uni.showToast({
						title: "手机号有误",
						icon: "error"
					})
					return
				}
				return true
			}
		},
		mounted() {
			this.getMore()
		}
	}
</script>


<style scoped>
	.checkBoxItem {
		vertical-align: middle;
	}

	/deep/ .scroll-Y .uni-data-checklist .checklist-group .checklist-box {
		margin: 0;
	}

	.orderInfo {
		width: 100%;
		height: calc(100% - 150px);
		overflow-y: auto;
	}

	.orderInfo .order1,
	.orderInfo .order2,
	.orderInfo .order3 {
		font-size: 10px;
		color: rgba(229, 229, 229, 1);
	}

	.orderTitle .orderLine2 {
		left: 30%;
	}

	.orderLine1,
	.orderLine2 {
		position: absolute;
		left: 10%;
		width: 0;
		height: 18px;
		border-right: 1px solid rgba(56, 56, 56, 1);
		top: 50%;
		transform: translateY(-50%);
	}

	.order1 {
		width: 10%;
	}

	.order2 {
		width: 20%;
		line-height: 12px;
		vertical-align: middle;
	}

	.order3 {
		width: calc(100% - 30%);
		vertical-align: middle;
	}

	.order1,
	.order2,
	.order3 {
		display: inline-block;
		text-align: center;
	}

	.orderTitle {
		margin-top: 10px;
		position: relative;
		width: 100%;
		height: 26px;
		line-height: 26px;
		border-radius: 5px;
		background: rgba(82, 82, 82, 1);
		border: 0.5px solid rgba(128, 128, 128, 1);
		font-size: 12px;
		font-weight: 400;
		color: rgba(229, 229, 229, 1);
	}

	.scroll-Y {
		height: 70px;
		margin-top: 4px;
	}

	.line {
		position: relative;
		width: 100%;
		height: 0px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.46);
		margin: 0 auto;
		margin: 10px 0;
	}

	.hangIcon {
		width: 12px;
		height: 9px;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
		color: rgba(255, 255, 255, 1);
		font-size: 12px;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner {
		border-color: rgba(18, 205, 217, 1);
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .radio__inner .radio__inner-icon {
		background-color: rgba(18, 205, 217, 1);
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--default.is-checked .checklist-text {
		color: unset;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box .radio__inner {
		background-color: unset;
	}

	.tipP {
		margin: 10px 0 10px 0;
		font-size: 12px;
		font-weight: 400;
		line-height: 18px;
		color: rgba(166, 166, 166, 1);
	}

	.submitBtn {
		position: fixed;
		width: 90%;
		background-color: aliceblue;
		bottom: 20px;
		height: 35px;
		border-radius: 259px;
		background: rgba(56, 56, 56, 1);

		font-size: 14px;
		font-weight: 400;
		line-height: 35px;
		color: rgba(166, 166, 166, 1);
	}

	.dataInput {
		width: 100%;
		margin: 0 auto;
		border-radius: 2px;
		box-sizing: border-box;
		padding: 0 2px;
		border: 1px solid #666;
		height: 32px;
		border-radius: 5px;
		background: rgba(128, 128, 128, 1);
		margin: 4px 0;
	}

	.tipBox .p {
		font-size: 12px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 27px;
		color: rgba(0, 0, 0, 1);
	}

	.H1 {
		font-weight: bold;
		font-size: 14px;
		font-weight: 500;
		line-height: 18px;
		color: rgba(0, 0, 0, 1);
	}

	.tipBox {
		overflow-y: auto;
		display: block;
		width: 96vw;
		height: 80vh;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 10px;
		background-color: rgba(255, 255, 255, 1);

	}

	.dataBox {
		height: calc(100vh - 390px);
		overflow-y: auto;
		box-sizing: border-box;
		padding: 10px;
		margin-top: 12px;
		background-color: rgba(56, 56, 56, 1);
		border-radius: 8px;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
		font-size: 10px;
		font-weight: 400;
		line-height: 18px;
		color: rgba(255, 255, 255, 1);
	}

	.topBox {
		font-size: 12px;
		box-sizing: border-box;
		padding: 10px;
		width: 100%;
		height: 300px;
		background-color: aliceblue;
		border-radius: 8px;
		background-color: rgba(56, 56, 56, 1);
		color: rgba(255, 255, 255, 1);
	}

	.bigBox {
		width: 100%;
		height: 100vh;
		background-color: rgba(34, 34, 34, 1);
		box-sizing: border-box;
		padding: 10px 5%;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>